<template>
  <!-- 科研人才足迹圈 -->
  <div style="position:relative">
    <div class="flow-box">
      <div v-for="(item, index) in flowData" :key="index" class="flow-item-box">
        <div class="flow-item">
          <h4>{{item.startYear}}</h4>
          <p class="flex"><span class="flex-tit">任职地点：</span><span class="content">{{item.name}}</span></p>
          <p class="flex"><span class="flex-tit">任职机构：</span><span class="content">{{item.an}}</span></p>
        </div>
        <i class="arrow el-icon-bottom"></i>
      </div>
    </div>
    <div id="chartThree"></div>
  </div>
</template>

<script>
// import chinaJson from "echarts/map/json/china.json"
import chinaJson from '@/utils/mock/china.json'
import chinaJson2 from '@/utils/mock/china.json'
// import worldJson from "echarts/map/json/world.json"
// import { world } from "@/utils/mock/world"
import { resize } from "@/utils/utils"
// import { geoCoord } from '@/utils/mock/geoCoordMap'
export default {
  mixins: [resize],
  props: {
    record: {
      type: Array
    }
  },
  data() {
    return {
      chartThree: null,
      data: [],
      flowData: [],
      defaultOption: {}
    };
  },
  methods: {
    init() {
      this.$echarts.registerMap("china", chinaJson)
      let data = this.record
      let dat = []
      data.forEach(v => {
        if (v.city !== '') {
          dat.push(v)
        }
      })

      let newData = []
      let ths = this
      for (let i in dat) {
        if (dat[i].city && (dat[i].city !== '')) { // 过滤掉city为空的数据
          dat[i].startYear = dat[i].start.split('-')[0]
          dat[i].name = dat[i].city // .replace(/市|省|自治区|壮族自治区|维吾尔|回族自治区/g, '')
          let from = dat[i]
          let to = dat[Number(i) + 1] || {name: ''}
          if ((to.name !== '') && (to.city !== '')) {
            newData.push([from, to])
          }
        }
      }

      this.data = newData
      
      var convertData = function (data) {
        let res = []
        for (let i in data) {
          let dataItem = data[i]
          let fromCoord = dataItem[0] && ths.getGeoCoord(dataItem[0].name) || []
          let toCoord = dataItem[1] && ths.getGeoCoord(dataItem[1].name) || []
          if (fromCoord.length > 0 && toCoord.length > 0) {
            res.push({
              fromName: dataItem[0].name,
              toName: dataItem[1].name,
              coords: [fromCoord, toCoord],
              visualMap: false,
            })
          }
        }
        return res
      }

      var series = []

      let startData = JSON.parse(JSON.stringify(this.data))
      if (startData.length > 0) {
        startData.forEach((v, n) => {
          let newArr = [[v]]
          newArr.forEach((item, i) => {
            let effectScatter = []
            item.forEach((b, j) => {
              effectScatter.push({
                value: ths.getGeoCoord(b[0].name),
                ...b[0],
                visualMap: false,
              })
            })

            series.push(
              {
                type: "effectScatter",
                coordinateSystem: "geo",
                zlevel: 2,
                animation: false,
                tooltip: {
                  show: false
                },
                rippleEffect: {
                  //涟漪特效
                  color: '#cecfe4',
                  period: 3, //动画时间，值越小速度越快
                  brushType: "fill", //波纹绘制方式 stroke, fill
                  scale: 2, //波纹圆环最大限制，值越大波纹越大
                },
                symbol: "circle",
                symbolSize: function (val) {
                  return 13; //圆环大小
                },
                itemStyle: {
                  normal: {
                    color: "#504da5", //标志颜色
                    borderColor: "#fff",
                  },
                  emphasis: {
                    areaColor: "orange",
                  },
                },
                data: effectScatter
              },
              {
                type: "lines",
                zlevel: 2,
                animation: false,
                tooltip: {
                  show: false
                },
                effect: {
                  show: false,
                  period: 3, //箭头指向速度，值越小速度越快
                  trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                  symbol: "arrow", //箭头图标
                  symbolSize: 8, //图标大小
                  color: "241c75",
                  loop: true,
                },
                lineStyle: {
                  // color: "white",
                  normal: {
                    color: "#241c75",
                    width: 1,
                    opacity: 0.2,
                    curveness: 0.1, // 边的弧度
                  },
                },
                data: convertData(item),
              },
            )
          })

          // 最后一个点特殊处理，将两个点都加进来
          if (n === (startData.length - 1)) {
            let effectScatter2 = []
            newArr.forEach((item, i) => {
              item.forEach((b, j) => {
                effectScatter2.push({
                  value: ths.getGeoCoord(b[1].name),
                  ...b[1],
                  visualMap: false,
                })
              })
            })
            
            series.push(
              {
                type: "effectScatter",
                coordinateSystem: "geo",
                zlevel: 2,
                animation: false,
                tooltip: {
                  show: false
                },
                rippleEffect: {
                  //涟漪特效
                  color: '#cecfe4',
                  period: 3, //动画时间，值越小速度越快
                  brushType: "fill", //波纹绘制方式 stroke, fill
                  scale: 2, //波纹圆环最大限制，值越大波纹越大
                },
                symbol: "circle",
                symbolSize: function (val) {
                  return 13; //圆环大小
                },
                itemStyle: {
                  normal: {
                    color: "#504da5", //标志颜色
                    borderColor: "#fff",
                  },
                  emphasis: {
                    areaColor: "orange",
                  },
                },
                data: effectScatter2
              },
            )
          } 
        })
      } else { // 如果newData数据为空，代表此人一直在一个公司工作，没有发生人才流动，此时补充节点
        if (dat[0]) {
          let effectScatter = [
            {
              value: ths.getGeoCoord(dat[0].city),
              ...dat[0],
              visualMap: false,
            }
          ]

          series.push(
            {
              type: "effectScatter",
              coordinateSystem: "geo",
              zlevel: 2,
              animation: false,
              tooltip: {
                show: false
              },
              rippleEffect: {
                //涟漪特效
                color: '#cecfe4',
                period: 3, //动画时间，值越小速度越快
                brushType: "fill", //波纹绘制方式 stroke, fill
                scale: 2, //波纹圆环最大限制，值越大波纹越大
              },
              symbol: "circle",
              symbolSize: function (val) {
                return 13; //圆环大小
              },
              itemStyle: {
                normal: {
                  color: "#504da5", //标志颜色
                  borderColor: "#fff",
                },
                emphasis: {
                  areaColor: "orange",
                },
              },
              data: effectScatter
            },
          )
        }
      }

      let option = {
        backgroundColor: "#fff",
        title: {
          text: "",
          left: "center",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "#fff",
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: "z-index:100",
          formatter: function (params, ticket, callback) {
            //根据业务自己拓展要显示的内容
            var res = "";
            var name = params.name;
            var value = params.value[params.seriesIndex + 1];
            res =
              "<span style='color:#fff;'>" +
              name +
              "</span><br/>数据：" +
              value;
            return res;
          },
        },
        visualMap: {
          //图例值控制
          min: 0,
          max: 10000,
          show: false,
          calculable: true,
        },
        geo: {
          map: "china",
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: true, //是否允许缩放
          layoutCenter: ["50%", "66%"], //地图位置
          layoutSize: '130%',
          itemStyle: {
            normal: {
              areaColor: "#edf0f4",
              borderColor: "#fff",
            },
            // emphasis: {
            //     areaColor: '#edf0f4'
            // }
          },
        },
        series: series,
      };

      this.defaultOption = option
      this.chartThree.setOption(option)
    },
    // 获取省市中心坐标
    getGeoCoord(name) {
      let geoCoord = []
      let features = chinaJson2.features
      for (let i in features) {
        let properties = features[i].properties
        if (properties.name === name) {
          geoCoord = properties.centroid || properties.center
          break
        }
      }
      return geoCoord
    },
  },
  watch: {
    record() {
      if (this.record.length > 0) {
        this.init()
      }
    }
  },
  mounted() {
    this.chartThree = this.$echarts.init(document.getElementById("chartThree"));
    // 与右侧列表联动
    this.$Bus.$on('curWorkExperience', d => {
      this.flowData = []
      let active = d.active
      let item = d.item
      let option = this.chartThree.getOption()
      if (option) {
        let series = option.series
        let curIndex = 0 // 当前高亮的index
        if (active !== -1) {
          for (let i in option.series) {
            if (option.series[i].type === 'effectScatter') {
              let effectScatterData = option.series[i].data
              for (let j in effectScatterData) {
                if (
                  effectScatterData[j] &&
                  (effectScatterData[j].an === item.an) &&
                  (effectScatterData[j].title === item.title) &&
                  (effectScatterData[j].start === item.start)
                ) {
                  curIndex = Number(i)
                  // 高亮
                  option.series[i].itemStyle.color = 'orange'
                  option.series[i].z = 3
                  option.series[i].zlevel = 3
                  this.flowData.push(option.series[i].data[0])
                } else {
                  // 重置默认样式
                  option.series[i].itemStyle.color = '#504da5'
                  option.series[i].z = 2
                  option.series[i].zlevel = 2
                }
              }
            } else {
              option.series[i].effect.show = false
              option.series[i].effect.color = '#504da5'
              option.series[i].lineStyle = {
                color: '#504da5',
                width: 1
              }
            }
          }

          if ((curIndex+2) <= option.series.length) {
            // 
            if (option.series[curIndex+1].effect) {
              option.series[curIndex+1].effect.show = true
              option.series[curIndex+1].effect.color = 'orange'
              option.series[curIndex+1].lineStyle = {
                color: 'orange',
                width: 2
              }
            }
            // 
            if (option.series[curIndex+2].itemStyle) {
              option.series[curIndex+2].itemStyle.color = 'orange'
              option.series[curIndex+2].z = 3
              option.series[curIndex+2].zlevel = 3
              this.flowData.push(option.series[curIndex+2].data[0])
            }
          }
          this.chartThree.setOption(option)
        } else {
          this.chartThree.setOption(this.defaultOption)
        }
      }
    })
  },
  beforeDestroy() {
    this.$Bus.$off('curWorkExperience')
  }
};
</script>

<style lang="scss" scoped>
.flow-box {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 35%;
  min-width: 200px;
  padding-left: 0;
  list-style: none;
  .flow-item-box {
    position: relative;
    width: 100%;
    &:last-of-type {
      .arrow {
        display: none;
      }
    }
    .flow-item {
      width: 100%;
      padding: 10px;
      border-radius: 2px;
      background-color: rgba(255, 255, 255, 0.2);
      h4 {
        line-height: 20px;
        border-bottom: '1px solid #000';
        font-size: 14px;
        color: '#595959';
      }
      p {
        line-height: 1.5;
        padding-left: 0;
        margin-bottom: 0;
        font-size: 12px;
        color: '#241c75';
        &.flex {
          display: flex;
        }
        .flex-tit {
          width: 62px;
        }
        .content {
          width: calc(100% - 62px);
          padding-top: 0;
          padding-left: 0;
          // font-weight: bold;
          background-color: transparent;
        }
      }
    }
    .arrow {
      position: relative;
      display: block;
      width: 100%;
      text-align: center;
    }
  }
}
#chartThree {
  width: 100%;
  height: 360px;
}
</style>